<template>
  <div class="incomeTracking">
    <div class="contentTopTitle">
      <div class="fl">
        <div class="title">预算下达跟踪</div>
      </div>
    </div>
    <div class="content" style="margin-top:3px">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="分公司月度预算" name="first">
          <tab1 ref="tab1"   v-if="isFirst" />
        </el-tab-pane>
<!--        <el-tab-pane label="用户发展预算" name="second" lazy>-->
<!--          <tab2 ref="tab2"  v-if="isSecond"/>-->
<!--        </el-tab-pane>-->
        <el-tab-pane label="分项业务收入" name="third" lazy>
          <tab3 ref="tab3" v-if="isThird"/>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
  import tab1 from "./tab1";
  import tab3 from "./tab3";
  import { getSessionStorage } from "@/common/js/storage";
  import {$budgetAPI} from "@/api"
  export default {
    name: "trackingService",
    components: {
      tab1,
      tab3,
    },
    data() {
      return {
        activeName: "first",
        isFirst:true,
        isSecond:false,
        isThird:false,
      };
    },

    // mounted(){
    //   this.$refs.tab1.init();
    // },
    methods: {
      handleClick(tab,event){
        if(tab.name == "first"){
          this.isFirst = true;
          this.isSecond = false;
          this.isThird = false;
          // this.$refs.tab1.init();
        }
        if(tab.name == "second"){
          this.isSecond = true;
          this.isFirst = false;
          this.isThird = false;
          // this.$refs.tab2.init();
        }
        if(tab.name == "third"){
          this.isThird = true;
          this.isFirst = false;
          this.isSecond = false;
          // this.$refs.tab3.init();
        }
      }

    }
  };
</script>

<style lang="scss" scoped>
</style>
